<template>
  <div class="md-login-dialog">
    <el-dialog title="Apply Reason" width="500px" :visible.sync="dialogFlag" append-to-body :close-on-click-modal="false" :close-on-press-escape="false" @close="handleClose" center>
      <el-form style="margin-top: -20px" ref="form" :model="form" :rules="rules">
        <el-form-item prop="remark" label="apply reason:">
          <el-input type="textarea" v-model="form.remark" placeholder="Please input reason" :autosize="{ minRows: 4, maxRows: 4}" />
        </el-form-item>
        <el-form-item>
          <div class="btn-box">
            <el-button type="primary" style="width: 170px;" @click="handleSubmit()">Confirm</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'MDLoginDialogComponent',
  props: {
    flag: {
      default: false
    },
    dialogInfo: {
      default: () => ({})
    }
  },
  data () {
    return {
      dialogFlag: false,
      form: {
        remark: ''
      },
      rules: {

      }
    }
  },
  watch: {
    flag: {
      handler (val) {
        this.dialogFlag = val
      }
    }
  },
  methods: {
    handleClose () {
      this.$refs.form.resetFields()
      this.$nextTick(() => {
        this.dialogFlag = false
        this.$emit('close') // 关闭弹窗
      })
    },
    async handleSubmit () {
      this.$refs.form.validate(async valid => {
        if (!valid) {
          return
        }
        const pres = await this.$axios.post('web/productOrder/listPage', {
          productId: this.form.productId,
          pageIndex: 1,
          pageSize: 10000
        })

        const statusList = pres.data.items.map(m => { return m.status })

        if (statusList.find(e => e === '2')) {
          this.$message.warning('You have already applied for this product. Please wait for approval.')
          return
        }

        const options = {
          ...this.form,
          ...this.dialogInfo
        }
        const res = await this.$axios.post('web/productOrder', options)
        if (res.code == 200) {
          this.$message.success('Apply Success!')
          this.handleClose()
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.btn-box {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: -10px;
  .register {
    width: 100%;
    position: absolute;
    right: 0;
    top: 35px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    span,
    a {
      cursor: pointer;
      color: $md-primary-color;
    }
  }
}
</style>
